<template>

  <a-row>
    <a-col span="4">
      <a-card :bordered="false" :bodyStyle="{padding:'0'}">
        <a-row style="height: 785px">
          <a-row style="margin-top: 10px">
            <a-col span="24">
              <a-input-search placeholder="搜索姓名/手机号/发药单号" style="width:98%;margin-left: 1%" />
            </a-col>
          </a-row>
          <a-row>
            <a-tabs default-active-key="1" style="width:96%;margin-left: 2%">
              <a-tab-pane key="1" tab="发药">
                <a-select defaultValue="0" @change="handleSendChange" style="width: 50%">
                  <a-select-option value='0'>待发药</a-select-option>
                  <a-select-option value='1'>已发药</a-select-option>
                  <a-select-option value='2'>已退药</a-select-option>
                  <a-select-option value='3'>已关闭</a-select-option>
                </a-select>
              </a-tab-pane>
              <a-tab-pane key="2" tab="加工" force-render>
              </a-tab-pane>
              <a-tab-pane key="3" tab="快递">
              </a-tab-pane>
            </a-tabs>
            <a-list item-layout="horizontal" :data-source="careListData" style="margin-top: 10px">
              <a-list-item slot="renderItem" slot-scope="item, index" :bordered="false">
                <div class="card"  :style="chooseId==item.id?bodyStyle1:bodyStyle0"    @click="handleChoosePatient(item)">
                  <a-row style="margin: 10px 10px 5px 20px">
                    <a-row :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;'"  >
                      <a-col span="8"> {{ item.patientName }}</a-col>
                      <a-col span="8"> {{ item.age }}岁</a-col>
                      <a-col span="8" align="right"> {{ item.sendStatusText }}</a-col>
                    </a-row>
                    <a-row :style="chooseId==item.id?'font-weight: bold;color:white;margin-top:5px':'font-weight: bold;margin-top:5px'">
                      <a-col span="12">  {{ item.patientPhone }} </a-col>
                      <a-col span="12" align="right"> {{ item.createTime }}</a-col>
                    </a-row>
                  </a-row>

                </div>
              </a-list-item>
            </a-list>
          </a-row>

        </a-row>

      </a-card>
    </a-col>
    <a-col span="16">
      <a-card>
        <div style="overflow-y: scroll; height: 900px;">
          <div style="width: 99%;margin-left: 8px">
            <a-card :title="mainCare.patientDesc" v-if="mainCare">
              <a-popconfirm title="是否确认删除?" ok-text="是" cancel-text="否" slot="extra">
                <a-button>打印</a-button>
              </a-popconfirm>
              <a-popconfirm title="是否确认删除?" ok-text="是" cancel-text="否" slot="extra" style="margin-left: 20px">
                <a-button>关闭</a-button>
              </a-popconfirm>
              <a-popconfirm title="是否确认发药?" ok-text="是" cancel-text="否" slot="extra" style="margin-left: 20px" @confirm='() => handleSureSend()'>
                <a-button type="primary">发药</a-button>
              </a-popconfirm>
            </a-card>



            <a-card  style="margin-top: 20px" v-if="mainCare&&westernMedicineData.itemList.length>0">
              <a-table
                style="margin-bottom:  60px"
                size="middle"
                bordered
                rowKey="id"
                :columns="columnsMedicine"
                :dataSource="westernMedicineData.itemList"
                :pagination="false">
              </a-table>
            </a-card>

          </div>
        </div>
      </a-card>
    </a-col>


    <a-col span="4">
      <a-card :bordered="false"  title="操作记录" :bodyStyle="{padding:'0'}">
        <a-row style="height: 785px">
          <a-row  v-if="careActionListData.length>0"  v-for="item in careActionListData" style="width: 90%;margin-left: 5%;margin-top: 10px">
            <a-row>
              {{ item.execName }}
            </a-row>
            <a-row style="margin-top: 10px">
              <a-col :span="16"> <h4>{{ item.execTime }}</h4></a-col>
              <a-col :span="8" align="right"> {{ item.displayName }}</a-col>
            </a-row>
            <a-divider />
          </a-row>
        </a-row>
      </a-card>
    </a-col>

  </a-row>


</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { deleteAction, getAction, postAction } from '@api/manage'
import moment from 'moment'

export default {
  name: '门诊',
  mixins: [mixinDevice],
  components: {
    JDictSelectTag
  },
  data() {
    return {
      description: '门诊页面',
      disableMixinCreated: true,
      cpCategoryList: [],
      visible: false,
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      queryParam: {
        cpType: '0'
      },
      // 表头
      columns: [
        {
          title: '诊疗项目',
          align: 'left',
          dataIndex: 'projectName',
          scopedSlots: { customRender: 'projectName' },
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'qty',
          width: 120
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'unit',
          width: 120
        },
        {
          title:'备注',
          align: 'center',
          dataIndex: 'remark',
          width: 120
        }, {
          title: '进度',
          align: 'center',
          dataIndex: 'totalQty',
          customRender: function(t, r, index) {
            return r.finishQty+"/"+r.totalQty
          },
          width: 120
        }
        , {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          scopedSlots: { customRender: 'action' },
          width: 130
        }
      ],

      columnsMedicine: [
        {
          title: '药品名称',
          align: 'center',
          dataIndex: 'medicineName',
          width: 200
        },
        {
          title: '用法',
          align: 'center',
          dataIndex: 'usages',
          width: 120
        },
        {
          title: '单价',
          align: 'center',
          dataIndex: 'price',
          width: 120,
          customRender: function(t, r, index) {
            return "¥"+t
          }
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'totalDose',
          width: 120,
          customRender: function(t, r, index) {
            return t+""+r.unit
          }
        },
        {
          title: '实收',
          align: 'center',
          dataIndex: 'amount',
          width: 120,
          customRender: function(t, r, index) {
            return "¥"+t
          }
        },
        {
          title: '已发数量',
          align: 'center',
          dataIndex: 'sendDose',
          width: 120,
          customRender: function(t, r, index) {
            if(t=="0"){
              return "0";
            }
            return t+""+r.unit
          }
        },
        {
          title: '待发数量',
          align: 'center',
          dataIndex: 'waitSendDose',
          width: 120,
          customRender: function(t, r, index) {
            if(t=="0"){
              return "0";
            }
            return t+""+r.unit
          }
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          width: 120
        }

      ],
      url: {
        list: '/his/care/exec/list',
        westernMedicineList: '/his/care/western/medicine/list',
        chineMedicineList: '/his/care/chine/medicine/list',
        execSend:'/his/care/exec/send/action',
        execActionLog:'/his/care/exec/action/log',
      },

      model:{},
      mainCare:{},
      bodyStyle0: { padding: '0' ,height:'65px',borderRadius: '8px',marginLeft: '2%' },
      bodyStyle1: { padding: '0' ,height:'65px',borderRadius: '8px',marginLeft: '2%',background: '#69c966' },
      westernMedicineData: {itemList:[]},//西药
      chineMedicineData: [],//中药
      careActionListData: [],//执行记录列表
      chooseId: 0
    }
  },
  created() {
    this.loadCareData('0')
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    moment,
    getCurrentData() {
      return new Date().toLocaleDateString()
    },
    handleSendChange(e){
      this.loadCareData(e);
    },
    loadCareData(sendStatus) {
      getAction(this.url.list, { 'sendStatus': sendStatus }).then((res) => {
        if (res.success) {
          this.careListData = res.result.records
          this.mainCare=this.careListData[0]
          this.chooseId=this.mainCare.id;
          if(this.careListData.length>0){
            this.loadDetailData();
          }else {
            this.westernMedicineData={ itemList:[]};
            this.careActionListData={};
          }
        }
      })
    },
    loadDetailData() {
      this.fetchCareWesternMedicine();
      this.fetchCareExecAction();
    },
    //西药
    fetchCareWesternMedicine() {
      getAction(this.url.westernMedicineList, { 'careCode': this.mainCare.careCode }).then((res) => {
        if (res.success) {
          this.westernMedicineData = res.result
        }
      })
    },
    //执行日志
    fetchCareExecAction() {
      getAction(this.url.execActionLog, { 'orderSn': this.mainCare.careCode,"orderType":"6" }).then((res) => {
        if (res.success) {
          this.careActionListData = res.result
        }
      })
    },
    //中药


    handleChoosePatient(item) {
      if (this.chooseId == item.id) {
        this.chooseId = 0
        return
      }
      this.chooseId = item.id
      this.mainCare = item
      this.loadCareExceDetailData();
    },
    handleSureSend(){
      const that=this;
      postAction(this.url.execSend, {"id":this.mainCare.id}).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          this.visible = false
          this.loadCareExceDetailData();
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.loading = false
      })
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

#example-table-id {
  text-align: center;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all
}

/* 取消 多行文本框 伸缩效果 resize: none; */
/* 取消 多行文本框 边框 border: none; */
textarea.ant-input {
  resize: none;
  border: none;
}

/* 取消 多行文本框 获取焦点的 边框 效果 */
textarea.ant-input:focus {
  border: none;
  box-shadow: none;
}

table {
  width: 100%;
  border-collapse: collapse; /* 合并表格边框 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #e2e2e2;
}

.card {
  border: 1px solid #f6f5f5;
  border-radius: 5px;
  width: 100%;
  margin-left: 2%;
  padding: 10px 10px 10px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
}


</style>
